<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消息</title>
    <link type="text/css" href="./css/xiaoxi.css" rel="stylesheet">
</head>
<body>
<div class="box">
        <div class="one_box">
            <p>微信</p>
            <img src="img/搜索.png" alt="">
            <div class="img">
            <a href=""><img src="img/加号.png" alt=""  id="jiahao" ></a>
            <div class="list">
                <ul>
                    <li><a href="">发起群聊</a></li>
                    <hr style="width: 80%;float: right;margin-top: -5px">
                    <li><a href="">添加朋友</a></li>
                    <hr style="width: 80%;float: right;margin-top: -5px">
                    <li><a href="">扫一扫</a></li>
                    <hr style="width: 80%;float: right;margin-top: -5px">
                    <li><a href="">收付款</a></li>
                    <hr style="width: 80%;float: right;margin-top: -5px">
                    <li><a href="">帮助与反馈</a></li>
                </ul>
            </div>
            </div>
    </div>
    <div class="two_box" style="margin-top: 120px">
            <div class="midden_1">
                <div class="top_1">
                    <img src="img/消息1.png" alt="" style="height: 90px;margin-top: 30px;margin-left: 20px">
                </div>
                <div class="top_2">
                    <p style="font-family:华文楷体">腾讯新闻</p>
                    <span>我，就是中国</span>
                </div>
                <div class="top_3">
                    <img src="img/右箭头.png" alt="">
                </div>
            </div>
            <hr style="width: 84%;float: right">
                <div class="midden_1">
                    <div class="top_1">
                        <img src="img/消息2.png" alt="" style="height: 90px;margin-top: 30px;margin-left: 20px">
                    </div>
                    <div class="top_2">
                        <p style="font-family:华文楷体">订阅号消息</p>
                        <span>[106条] 首新地服：【五四青年节】...</span>
                    </div>
                    <div class="top_3">
                        <img src="img/右箭头.png" alt="">
                    </div>
                </div>
                <hr style="width: 84%;float: right">
                <div class="midden_2">
                    <div class="top_1">
                        <img src="img/消息3.png" alt="">
                    </div>
                    <div class="top_2">
                        <p style="font-family:华文楷体">微信运动</p>
                        <span>[应用消息]</span>
                    </div>
                    <div class="top_3">
                        <img src="img/右箭头.png" alt="">
                    </div>
                </div>
                <hr style="width: 84%;float: right">
                <div class="midden_3">
                    <div class="top_1">
                        <img src="img/消息4.png" alt="">
                    </div>
                    <div class="top_2">
                        <p style="font-family:华文楷体">微信支付</p>
                        <span>微信支付凭证</span>
                    </div>
                    <div class="top_3">
                        <img src="img/右箭头.png" alt="">
                    </div>
                </div>
                <hr style="width: 84%;float: right">
                <div class="midden_4">
                    <div class="top_1">
                        <img src="img/消息5.png" alt="">
                    </div>
                    <div class="top_2">
                        <p style="font-family:华文楷体">服务通知</p>
                        <span>商品降价提醒</span>
                    </div>
                    <div class="top_3">
                        <img src="img/右箭头.png" alt="">
                    </div>
                </div>
                <hr style="width: 84%;float: right">
                <div class="midden_4">
                    <div class="top_1">
                        <img src="img/消息6.png" alt="">
                    </div>
                    <div class="top_2">
                        <p style="font-family:华文楷体">文件传输助手</p>
                        <span>[图片]</span>
                    </div>
                    <div class="top_3">
                        <img src="img/右箭头.png" alt="">
                    </div>
                </div>
                <hr style="width: 84%;float: right">
                <div class="midden_4">
                    <div class="top_1">
                        <img src="img/人物1.png" alt="">
                    </div>
                    <div class="top_2">
                        <p style="font-family:华文楷体">胖虎</p>
                        <span>good..</span>
                    </div>
                    <div class="top_3">
                        <img src="img/右箭头.png" alt="">
                    </div>
                </div>
                <hr style="width: 84%;float: right">
                <div class="midden_4">
                    <div class="top_1">
                        <img src="img/人物2.png" alt="">
                    </div>
                    <div class="top_2">
                        <p style="font-family:华文楷体">小美</p>
                        <span>hello,小哥哥。</span>
                    </div>
                    <div class="top_3">
                        <img src="img/右箭头.png" alt="">
                    </div>
                </div>
                <hr style="width: 84%;float: right">
                <div class="midden_4">
                    <div class="top_1">
                        <img src="img/人物3.png" alt="">
                    </div>
                    <div class="top_2">
                        <p style="font-family:华文楷体">小七</p>
                        <span>拜拜。</span>
                    </div>
                    <div class="top_3">
                        <img src="img/右箭头.png" alt="">
                    </div>
                </div>
                <hr style="width: 84%;float: right">
                <div class="midden_4">
                    <div class="top_1">
                        <img src="img/人物4.png" alt="">
                    </div>
                    <div class="top_2">
                        <p style="font-family:华文楷体">小默</p>
                        <span>你真幽默！</span>
                    </div>
                    <div class="top_3">
                        <img src="img/右箭头.png" alt="">
                    </div>
                </div>
        </div>
    <div class="three_box">
                <ul>
                    <li>
                        <a href="消息.html" style="color: #3fc20c">
                            <img src="img/111.png" alt="">
                            <span>消息</span>
                        </a>
                    </li>
                    <li>
                        <a href="通讯录.html">
                            <img src="img/22.png" alt="">
                            <span>通讯录</span>
                        </a>
                    </li>
                    <li>
                        <a href="发现.html">
                            <img src="img/33.png" alt="">
                            <span>发现</span>
                        </a>
                    </li>
                    <li>
                        <a href="我的.html">
                            <img src="img/44.png" alt="">
                            <span>我</span>
                        </a>
                    </li>
                </ul>
        </div>
</div>
</body>
</html>